<template>
	<view class='shop-list'>

		<view class='shop-title f-color'>
			<view class='shop-item' v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
				<view :class="shopList.currentIndex==index?'f-active-color':'f-color'">{{item.name}}</view>
				<view class='shop-icon'>
					<view class='iconfont icon-shangjiantou up' :class=' item.status ===1 ? "f-active-color":"" '>
					</view>
					<view class='iconfont icon-xiajiantou down' :class=' item.status ===2 ? "f-active-color":"" '>
					</view>
				</view>
			</view>

		</view>
		<Lines />
		<CommodityList :dataList='dataList'></CommodityList>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import CommodityList from './CommodityList.vue'
	export default {
		props:{
			keyword:String
		},
		data() {
			return {
				shopList: {
					currentIndex: 0,
					data: [{
							name: '价格',
							status: 1
						},
						{
							name: '折扣',
							status: 0
						},
						{
							name: '品牌',
							status: 0
						}
					]
				},
				dataList: [{
						id: 1,
						imgUrl: "../../static/img/commodity1.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "../../static/img/commodity2.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 3,
						imgUrl: "../../static/img/commodity3.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 4,
						imgUrl: "../../static/img/commodity4.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					}
				]
			}
		},
		components: {
			Lines,
			CommodityList
		},
		methods: {
			changeTab(index) {
				// 每个对象的索引值
				let idx = this.shopList.currentIndex
				// 具体哪一个对象
				let item = this.shopList.data[idx]
				// 如果点击的就是当前的那个对象，那么让箭头取反
				if (idx == index) {
					return item.status = item.status === 1 ? 2 : 1
				}
				// 新的值
				let newItem = this.shopList.data[index]
				// 原来的所有item全部变成默认颜色
				item.status=0
				// 切换对象时给文字添加选中颜色属性
				this.shopList.currentIndex=index
				// 当前的选中的箭头默认为向上
				newItem.status=1


				

			}
		}
	}
</script>

<style scoped>
	.shop-title {
		display: flex;
	}

	.shop-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}

	.shop-icon {
		position: relative;
		margin-lef: 10rpx;
	}

	.iconfont {
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -34rpx;
	}

	.down {
		top: -24rpx;
	}
</style>
